<template>
  <div>
    <div>
      <!-- <span style="color:orange" v-if="showBtn">如文档展示隐藏左侧目录按钮位置不在左侧目录栏右侧，请点击<a style="color:blue" @click.prevent="checkBtnPosition">此处校正</a>到正确位置(目录右侧)后，再操作(如点击一次不对请多点击几次)</span> -->
      <Button
        @click="gotoGuideFile"
        size="small"
        type="primary"
        icon="ios-expand"
        style="margin: 0 0 10px 10px;float:right;"
        >全屏查看</Button
      >
      <Button
        v-if="$route.query.expType==2"
        @click="downLoadGuide"
        size="small"
        type="primary"
        icon="ios-download"
        style="margin: 0 0 10px 10px;float:right;margin-right:10px"
        >下载</Button
      >
    </div>
    <section class="iframeWarp" :style="`fontSize:${rem}`">
      <!-- <div v-if="showBtn" class="iframeWarpArrow" :style="showAllIframe?`left:${left}`:'left:0'"  @click="showOrHideIframe">
                  <img :src="contrlImg" style="height: 75px;width: 17px">
              </div> -->
      <section>
        <section v-if="guideSrc.endsWith('md')">
          <div v-html="articalContent" class="markdown-body" style="font-size:10px"></div>
          <NoData style="margin-top:20%" v-if="!articalContent" noDataText="文件加载中，请稍后"></NoData>
        </section>
        <iframe
          v-else
          :style="
            showAllIframe
              ? `width:100%;height:${contentHeiNei}`
              : `width:calc(100% + ${left});left:${left.slice(0, -3) * -1 +
                  'rem'};height:${contentHeiNei}`
          "
          :class="showAllIframe ? 'show' : 'hide'"
          class="iframe"
          frameborder="1"
          :src="guideSrc"
          id="expDoc"
          @load="loadPdf"
        ></iframe>
      </section>
    </section>
    <!-- <div v-show="showDefImg || !docLoadCompete || (docLoadCompete && !docLoaded)" class="defGraphWrap">
				<div class="defGraph"></div>
				<div class="graphText" v-if="showDefImg">暂无信息</div>
				<div class="graphText" v-else-if="!docLoadCompete">加载中...</div>
				<div class="graphText" v-else>课件加载失败{{loadErrorMessage ? ':' + loadErrorMessage : ''}}</div>
		</div>  -->
  </div>
</template>
<script>
import $ from 'jquery';
import { donwLoadMdFile } from '@/api/guide.js';
import { marked } from 'marked';
export default {
  props: ['guideSrc', 'mdPath', 'contentHeiNei', 'type', 'showDefImg', 'fileId', 'fileName'],
  components: {  },
  data() {
    return {
      showBtn: true,
      userBrowser: '',
      num: 0,
      USER_ID: '',
      isRootDesigner: false,
      left: '0%',
      articalContent: '',
      showAllIframe: true,
      // 接收的数据
      reciveData: {},
      contrlImg: require('../../../assets/exper/close-book.png'),
      rem: '16px',
      defaultRatio: 100,
      OffsetLeft: '0rem',
      docLoadCompete: false,
      docLoaded: false,
      loadErrorMessage: ''
    };
  },
  created() {
    // 获取用户id
    // let November = sessionStorage.getItem('November')
    // November = JSON.parse(encryption.SelfUseDecrypt(November))
    // this.USER_ID = November.userId
    // this.isRootDesigner = November.isRootDesigner
  },
  mounted() {
    console.log(this.guideSrc);
    this.getBrowser();
    this.setRem();
    if (this.guideSrc.endsWith('md')) {
      donwLoadMdFile({ path: this.mdPath }).then((res) => {
        if (res.code && res.code == 500) {
          this.articalContent = '';
        } else {
          const htmlMD = marked(res);
          this.articalContent = htmlMD;
        }
      });
    }
    window.onresize = () => {
      this.setRem();
    };
  },
  methods: {
    loadPdf() {
      this.$emit('loads');
      //    this.docLoadCompete = true;
      //     let returnData = '';
      //     if(document.getElementById('expDoc').contentDocument){
      //         returnData = document.getElementById('expDoc').contentDocument.body.innerText;
      //     }
      //     try{
      //         let data = JSON.parse(returnData);
      //         this.docLoaded = false;
      //         this.loadErrorMessage = data.message;
      //     }catch(e){
      //         this.docLoaded = true;
      //         this.loadErrorMessage = '';
      //     }
    },
    getBrowser() {
      if (navigator.userAgent.indexOf('MSIE') > 0) {
        this.userBrowser = 'MSIE';
      } else if (navigator.userAgent.indexOf('Firefox') > 0) {
        this.userBrowser = 'Firefox';
      } else if (navigator.userAgent.indexOf('Edg') > 0) {
        this.userBrowser = 'Edg';
      } else if (navigator.userAgent.indexOf('QQBrowser') > 0) {
        this.userBrowser = 'QQBrowser';
      } else this.userBrowser = 'Chrome';
      console.log('browser:', this.userBrowser);
    },
    checkBtnPosition() {
      const arr = [100, 125, 150, 175];
      const index = arr.findIndex((a) => a == this.defaultRatio);
      if (index != -1 && arr[index + 1]) {
        this.defaultRatio = arr[index + 1];
      } else {
        this.defaultRatio = 100;
      }
      localStorage.setItem('defaultRatio', this.defaultRatio);
      this.setLeft();
    },
    setLeft() {
      this.defaultRatio = localStorage.getItem('defaultRatio') || this.defaultRatio;
      let ratio = this.getRatio();
      let percent = Math.floor((ratio / this.defaultRatio) * 100);
      const mapLeftValue = {
        66: '28.4rem',
        67: '28.4rem',
        74: '25.2rem',
        75: '25.2rem',
        79: '23.5rem',
        80: '23.5rem',
        89: '21rem',
        90: '21rem',
        99: '18.8rem',
        100: '18.8rem',
        109: '17.28rem',
        110: '17.28rem',
        124: '15.2rem',
        125: '15.2rem',
        149: '12.6rem',
        150: '12.6rem'
      };
      this.showBtnFn(percent);
      this.left = mapLeftValue[percent];
    },
    showBtnFn(percent) {
      if (this.userBrowser == 'Chrome' && !this.guideSrc.endsWith('md')) {
        if (this.type == 1) {
          //type为0时候为主要显示页面,为1时候接入机器页面
          if (percent > 80) {
            this.showBtn = true;
          } else {
            this.showBtn = false;
          }
        } else {
          this.showBtn = true;
        }
      } else {
        this.showBtn = false;
      }
    },
    getRatio() {
      var ratio = 0;
      var screen = window.screen;
      var ua = navigator.userAgent.toLowerCase();
      if (window.devicePixelRatio !== undefined) {
        ratio = window.devicePixelRatio;
      } else if (~ua.indexOf('msie')) {
        if (screen.deviceXDPI && screen.logicalXDPI) {
          ratio = screen.deviceXDPI / screen.logicalXDPI;
        }
      } else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
        ratio = window.outerWidth / window.innerWidth;
      }
      if (ratio) {
        ratio = Math.round(ratio * 100);
      }
      return ratio;
    },
    setRem() {
      //基准大小
      const baseSize = 100;
      let basePc = baseSize / 1920; //表示1920的设计图，使用100px默认值
      let vW = window.innerWidth;
      let vH = window.innerHeight;
      //非正常屏幕下在尺寸换算---当前屏幕宽度下换算为1920/1080的高度
      // let dueH = vW*1920/1080;
      // if(vH<dueH){//如果当前的高度比按照标准比例下的高度小
      //     vW = vH*1920/1080//以当前高度为基准，设定当前宽度
      // }
      let rem = vW * basePc;
      this.rem = rem + 'px';
      this.setLeft();
    },
    gotoGuideFile() {
      window.openTrain(this.guideSrc, '_blank');
    },
    downLoadGuide() {
      let href = `/api/self-study/exp/experiment/download/?fileId=${this.fileId}&fileName=${this.fileName}`;
      let downloadAnchorNode = document.createElement('a');
      downloadAnchorNode.setAttribute('href', href);
      downloadAnchorNode.setAttribute('download', '');
      downloadAnchorNode.click();
      downloadAnchorNode.remove();
    },
    showOrHideIframe() {
      this.OffsetLeft = this.left;
      this.showAllIframe = !this.showAllIframe;
      if (this.showAllIframe) {
        this.contrlImg = require('../../../assets/exper/close-book.png');
      } else {
        this.contrlImg = require('../../../assets/exper/open-book.png');
      }
    }
  }
};
</script>
<style scoped>
@import 'github-markdown-css' .addressIcon {
  display: inline-block;
  height: 14px;
  width: 12px;
  background: url('../../../assets/exper/addressIcon.png') no-repeat center;
  background-size: 100% 100%;
  margin-bottom: -1px;
}
.class-top {
  display: flex;
  justify-content: space-between;
  padding: 0 30px;
}
.class-title-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.class-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 50px;
}
.class-title-all {
  font-size: 16px;
  cursor: pointer;
  color: var(--default-color-level2);
}
.active {
  color: var(--default-color);
  font-size: 22px;
  font-weight: 600;
}
.class-title-line {
  background-color: transparent;
  height: 3px;
  border-radius: 1px;
  width: 50px;
  margin: 20px 0 3px 0;
}
.line-active {
  background-color: var(--default-color);;
}
.openCloseIcon {
  cursor: pointer;
}
.openCloseIcon:hover {
  color: blue;
}
/*
    * 滚动条样式
    */
.guide-wrap {
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 20px 30px 0px;
}
/**指导书**/
.guidancebookList .guidancebooktitle {
  background: var(--table-tr-hover-color);
  padding-left: 20px;
  height: 40px;
  line-height: 40px;
  width: 100%;
  font-size: 16px;
  margin-bottom: 10px;
  /* color: #333; */
  cursor: pointer;
  border-radius: 6px;
}
.guidancebookList .guidancebookcontent {
  font-size: 14px;
  padding-left: 35px;
  padding-bottom: 15px;
  word-break: break-all;
}
.guidancebookList .guidancebookcontent p {
  line-height: 2;
}
.bgUnfold {
  background: url('../../../assets/exper/open-title.png') no-repeat center !important;
  width: 20px;
  height: 20px;
  background-size: 20px 20px;
  display: inline-block;
  margin-bottom: -3px;
  margin-right: 10px;
}
.openClass {
  background: url('../../../assets/exper/close-title.png') no-repeat center;
  width: 20px;
  height: 20px;
  background-size: 20px 20px;
  display: inline-block;
  margin-bottom: -3px;
  margin-right: 10px;
}
/**指导书**/
.class-right-info {
  background-color: var(--card-body-bgcolor);
  padding: 30px 20px 20px;
  border-radius: 10px;
  overflow-y: auto;
  overflow-x: hidden;
}
.difficultyIcon {
  display: inline-block;
  height: 16px;
  width: 18px;
  background: url('../../../assets/exper/deficut.png') no-repeat center;
  background-size: 11px 100%;
  margin-bottom: -2px;
  margin-right: 5px;
}
.designIcon {
  display: inline-block;
  height: 13px;
  width: 18px;
  background: url('../../../assets/exper/avtar.png') no-repeat center;
  background-size: 11px 100%;
  margin-bottom: -2px;
  margin-right: 5px;
}
.visibilyIcon {
  display: inline-block;
  height: 9px;
  width: 18px;
  background: url('../../../assets/exper/see.png') no-repeat center;
  background-size: 15px 100%;
  margin-bottom: -2px;
  margin-right: 5px;
}
.desigTimeIcon {
  display: inline-block;
  height: 11px;
  width: 18px;
  background: url('../../../assets/exper/time-icon.png') no-repeat center;
  background-size: 11px 100%;
  margin-bottom: -2px;
  margin-right: 5px;
}
.class-right-icon {
  color: darkgrey;
  line-height: 2;
}
.class-right-icon-rule {
  color: #3a3ad1;
}
.deployErrorBtn {
  font-size: 24px;
  color: #f00;
}
/deep/.destroyPop .ivu-poptip-rel {
  width: 100%;
}
.destoryTime {
  position: absolute;
  width: 100%;
  height: 40px;
  bottom: 0px;
  text-align: center;
  background: rgba(0, 0, 0, 0.6);
  padding: 8px;
  color: #fff;
}
</style>
<style>
.iframeWarp {
  overflow: hidden;
  position: relative;
  width: 100%;
}
.iframeWarp .iframeWarpArrow {
  position: absolute;
  z-index: 20;
  top: 140px;
  color: #3a3ad1;
  font-size: 32px;
}
.iframeWarp .iframeWarpArrow.hide {
  left: 0;
}
.iframeWarp .iframe {
  position: relative;
}
.iframeWarp .iframe.show {
  width: 100%;
}
</style>
